<template>
  <div>
    <h1 class="header-title">欢迎使用项目任务管理系统</h1>
    <!-- 头部组件 - 用户视图 -->
    <div v-if="roleName === 'user'" class="user-view">
      <div v-bind="grid" class="ivu-mb user-card" v-for="(item, index) in filteredInfoList" :key="index">
        <el-card :bordered="true" shadow="hover" :padding="16" class="user-card-content">
          <div class="card-header">
            <p slot="title" class="card-title">
              <span v-text="item.title"></span>
            </p>
          </div>
          <div class="card-body">
            <el-divider />
            <span class="card-number">{{ item.num }}</span>
            <el-divider />
          </div>
        </el-card>
      </div>
    </div>
    <!-- 头部组件 - 管理员视图 -->
    <el-row v-if="roleName === 'admin'" :gutter="24">
      <el-col v-bind="grid" class="ivu-mb" v-for="(item, index) in filteredInfoList" :key="index">
        <el-card :bordered="false" dis-hover :padding="8">
          <div class="card-header">
            <p slot="title">
              <span v-text="item.title"></span>
            </p>
          </div>
          <div>
            <el-divider />
            <span class="admin-card-number">{{ item.num }}</span>
            <el-divider />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 小方块 -->
    <div v-if="roleName === 'user'">
      <el-row :gutter="24" class="user-menu">
        <el-col v-bind="gridMenu" class="block">
          <router-link :to="{ path: `/admin/project` }" class="href">
            <el-card :bordered="false" class="box user-menu-card">
              <el-icon :size="30">
                <DataBoard />
              </el-icon>
              <p>项目管理</p>
            </el-card>
          </router-link>
        </el-col>
        <el-col v-bind="gridMenu" class="block">
          <router-link :to="{ path: `/admin/task` }" class="href">
            <el-card :bordered="false" class="box user-menu-card">
              <el-icon :size="30">
                <List />
              </el-icon>
              <p>任务管理</p>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <el-row :gutter="24" class="admin-menu">
        <el-col v-bind="gridMenu" class="block">
          <router-link :to="{ path: `/admin/user` }" class="href">
            <el-card :bordered="false" class="box">
              <el-icon :size="30">
                <User />
              </el-icon>
              <p>用户管理</p>
            </el-card>
          </router-link>
        </el-col>
        <el-col v-bind="gridMenu" class="block">
          <router-link :to="{ path: `/admin/project` }" class="href">
            <el-card :bordered="false" class="box">
              <el-icon :size="30">
                <DataBoard />
              </el-icon>
              <p>项目管理</p>
            </el-card>
          </router-link>
        </el-col>
        <el-col v-bind="gridMenu" class="block">
          <router-link :to="{ path: `/admin/task` }" class="href">
            <el-card :bordered="false" class="box">
              <el-icon :size="30">
                <List />
              </el-icon>
              <p>任务管理</p>
            </el-card>
          </router-link>
        </el-col>
        <el-col v-bind="gridMenu" class="block">
          <router-link :to="{ path: `/admin/admin` }" class="href">
            <el-card :bordered="false" class="box">
              <el-icon :size="30">
                <Stamp />
              </el-icon>
              <p>管理员管理</p>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.header-title {
  text-align: center;
  padding: 30px;
}

.user-view {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.user-card {
  flex: 1 1 calc(50% - 24px);
}

.user-card-content {
  background: linear-gradient(to right, #628eab, #cfe9ff);
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin: 0 15px;
  align-items: center;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.card-body {
  text-align: center;
  margin-top: 10px;
}

.card-number {
  font-size: 40px;
  font-weight: 800;
  color: #5170D7;
}

.admin-card-number {
  font-size: 35px;
  font-weight: 700;
  color: rgb(81, 90, 110);
}

.user-menu {
  display: flex;
  justify-content: space-around;
  margin: 5px 10px;
}

.user-menu-card {
  background: linear-gradient(to right, #e0f7fa, #b2ebf2);
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.admin-menu {
  display: flex;
  justify-content: space-around;
  margin: 5px 10px;
}
</style>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import { HomeData } from '@/api/home';

const store = useStore();
const roleName = store.getters.roleName;

const grid = ref({
  xl: 8,
  lg: 8,
  md: 12,
  sm: 12,
  xs: 24
});
const gridMenu = ref({
  xl: 3,
  lg: 4,
  md: 6,
  sm: 8,
  xs: 8
});
const infoList = ref([
  {
    title: '项目数',
    num: 9999
  },
  {
    title: '任务数',
    num: 9999
  },
  {
    title: '用户数',
    num: 9999
  }
]);

const filteredInfoList = computed(() => {
  if (roleName === 'user') {
    return infoList.value.filter(item => item.title !== '用户数');
  }
  return infoList.value;
});

onMounted(() => {
  HomeData().then(res => {
    infoList.value[0].num = res.data.projectNum;
    infoList.value[1].num = res.data.taskNum;
    infoList.value[2].num = res.data.userNum;
  });
});
</script>

<style lang="scss" scoped>
.href {
  text-decoration: none;
}

.block {
  text-align: center;
}

.box {
  color: #2d8cf0;
  background: transparent;
  outline: none;
  cursor: pointer;
  transition: color .2s ease;
}

.nl {
  display: inline-block;
  padding: 0 2px;
}

.number {
  font-size: 30px;
  margin-bottom: 10px;
}

.el-iconColor {
  color: #ed4014;
}

.el-iconColor.on {
  color: #19be6b;
}

.ivu-mr {
  margin-right: 16px !important;
}

.ivu-text-right {
  text-align: right;
}
</style>